import Vue from "vue";
// 小技巧：
// 如果看到import导入，分析是相对路径还是绝对路径
// 如果是相对路径，则说明是当前项目中自己写的功能模块
// 如果是绝对路径，则要么是node内置模块，要么是第三方模块在node_modules里面
import "normalize.css/normalize.css"; // 设置统一的css样式
// 安装element-ui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 导入英文语言包
// import locale from "element-ui/lib/locale/lang/en"; // lang i18n
// 导入全局样式
import "@/styles/index.scss"; // global css
// 导入根组件
import App from "./App";
// 导入仓库
import store from "./store";
// 导入路由
import router from "./router";
// 导入全局组件
import MyPlugin from "@/components";
// #region
// 导入图标
import "@/icons"; // icon
// 导入i18n实例
import i18n from "@/lang";
// 导入导航守卫
import "@/permission"; // permission control
// 导入过滤器
import * as filters from "@/filters";
// 导入自定义指令文件
import * as directive from "@/directive";
// 批量注册自定义指令
Object.keys(directive).forEach((item) => {
  // item就是模块里面每个暴露的属性名   directive[item] 就是每个属性的值
  Vue.directive(item, directive[item]);
});
// 批量注册过滤器
Object.keys(filters).forEach((item) => {
  Vue.filter(item, filters[item]);
  // Vue.filter(过滤器名,函数)
});
// 导入全局混入和对象
import checkPermission from "@/mixins/checkPermission";
// 全局混入
Vue.mixin(checkPermission);

/**
 * Mockjs的使用
 */
// if (process.env.NODE_ENV === "production") {
//   const { mockXHR } = require("../mock");
//   mockXHR();
// }

// 安装element-ui并且配置英文语言包
// Vue.use(ElementUI, { locale });
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI);
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
});

// # endregion

// Vue.use(插件名);  // 安装一个插件，会执行插件的install方法
// Vue的插件有个要求，就是必须有install方法
Vue.use(MyPlugin);

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  store,
  i18n,
  render: (h) => h(App),
});
